<template>
 <div id="recommGd">
      <div class="title">
           <h1 style="font-size: 24px;">推荐歌单</h1>
           <span class="iconfont rightS">&#xe65e;</span>
      </div>
    <ul >
      
        <li v-for="(items,index) in imgs" :key="index">
            <img :src="items.cover" alt="">
            <span style="font-size:20px">{{items.title}}</span>
            <span></span>
        </li>
   
    </ul>
 </div>   
</template>

<script>
// import axios from 'axios'
import api from '../utils/api'
import Services from '../utils/Service'
export default {
    data() {
        return {
            // 推荐歌单
            imgs:[
            //     {
            //     id:'图片1',
            //     title:'不惧岁月|想在爱意随风起的时代和你慢慢来',
            //     index:'',
            //     "cover":require('../../public/homeImg/recommGd.jpg')
            // },
            ]
        }
    },
    created() {
        this.getGd();
    },
    mounted() {
		var mySwiper = new Swiper('.swiper-container', {
	        autoplay: 5000,//可选选项，自动滑动
            slidesPerView : 3,
            spaceBetween : 20,
            watchSlidesProgress : true,
            watchSlidesVisibility : true,
        })
	},
    methods: {
        
        async getGd(){
      var data = {
        limit:9
      }
      let res = await Services(api.personalized,data);
      if(res.status == 200&&res.data.code==200){
        //  console.log(res+'推荐歌单')
        for (let index = 0; index < res.data.result.length; index++) {
            this.imgs.push({
                id:res.data.result[index].id,
                title:res.data.result[index].name,
                // index:'',
                "cover":res.data.result[index].picUrl,
            })
            
        }
      }else{
        console.log(res)
      }

    },
    },

}
</script>
<style lang="less" scoped>
@font-face {
  font-family: 'iconfont';
  src: url('../../public/font_home/iconfont.woff2?t=1657706050349') format('woff2'),
       url('../../public/font_home/iconfont.woff?t=1657706050349') format('woff'),
       url('../../public/font_home/iconfont.ttf?t=1657706050349') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#recommGd{
    margin: 10px;
    height:3.802083rem /* 730/192 */;
    .title{
        display: flex;
           //  justify-content: center;/*水平居中*/
    align-items: center;/*垂直居中*/

        .rightS{
            font-size: 35px;
              margin-bottom: 8px;
              font-weight: inherit;
    }
    }
  
    h1{
        margin-bottom: 8px;
        color: #373737;
    }
    ul{
         height:3.802083rem /* 730/192 */;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        //  justify-content: center;/*水平居中*/
    align-items: center;/*垂直居中*/
    }

     li{
             width: calc(calc(100% / 5));
            
            height: 48%;
            box-sizing: border-box;
            // border: 1px solid #000;
        span,img{
            display: block;
            width:92%;
            color: #373737;
        }
        img{
            border-radius: 5%;
        }
     }

   
   }
   

</style>